<template>
    <div>
        <div class="imgbox">
            <img src="../../assets/img/团队logo.jpg" width="135px" height="135px"/>

        </div>
        <el-menu :default-active="activeIndex" class="el-menu-demo nva_style" mode="horizontal" @select="handleSelect">
            <el-row>
                <el-col :span="7">
                    <div class="grid-content"></div>
                </el-col>
                <!--                <el-col :span="12">-->
                <!--                    <h1 class="">半点时光甜品店</h1>-->
                <!--                </el-col>-->
                <el-col :span="2">
                    <el-menu-item index="4" @click="uindex()">首页</el-menu-item>
                </el-col>

                <el-col :span="2">
                    <el-menu-item index="4" @click="cakes()">稻瘟病</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-menu-item index="4" @click="desserts()">白叶枯病</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-menu-item index="4" @click="puddings()">水稻曲病</el-menu-item>
                </el-col>
                <el-col :span="2">
                    <el-submenu index="2">
                        <template slot="title">用户中心</template>
                        <el-menu-item index="2-1" @click="shoppingCart()">购物车</el-menu-item>
                        <el-menu-item index="2-2" @click="edit()">信息修改</el-menu-item>
                        <el-menu-item index="2-3" @click="loginOut()">退出登录</el-menu-item>
                    </el-submenu>
                </el-col>
                <el-col :span="3">
                </el-col>
            </el-row>
        </el-menu>
    <el-row class="er1">
        <el-col :span="3">
            <div class="grid-content"></div>
        </el-col>
        <el-col :span="18">
            <div class="el-icon-video-camera-solid">清凉解暑</div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-row>
                        <el-col :span="5"><div class="grid-content bg-purple">
                            <!--                    <img :src=book[0].dessertPic class="image"  @click="u_book(book[0].id )">-->
                            <el-image
                                    class="table-td-thumb"
                                    :src="dessert[0].dessertPic"
                                    :preview-src-list="[dessert[0].dessertPic]"
                                    @click="u_book(dessert[0].dessertId )"
                            ></el-image>

                            <h5>{{dessert[0].dessertName}}</h5>
                        </div></el-col>
                        <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="5"><div class="grid-content bg-purple">
                            <el-image
                                    class="table-td-thumb"
                                    :src="dessert[1].dessertPic"
                                    :preview-src-list="[dessert[1].dessertPic]"
                                    @click="u_book(dessert[1].dessertId )"
                            ></el-image>
                            <h5>{{dessert[1].dessertName}}</h5>
                        </div></el-col>
                        <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="5"><div class="grid-content bg-purple">
                            <el-image
                                    class="table-td-thumb"
                                    :src="dessert[2].dessertPic"
                                    :preview-src-list="[dessert[2].dessertPic]"
                                    @click="u_book(dessert[2].dessertId )"
                            ></el-image>
                            <h5>{{dessert[2].dessertName}}</h5>
                        </div></el-col>
                        <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="5"><div class="grid-content bg-purple">
                            <el-image
                                    class="table-td-thumb"
                                    :src="dessert[3].dessertPic"
                                    :preview-src-list="[dessert[3].dessertPic]"
                                    @click="u_book(dessert[3].dessertId )"
                            ></el-image>
                            <h5>{{dessert[3].dessertName}}</h5>
                        </div></el-col>
                    </el-row>
                    <el-row >
                        <el-col :span="5"><div class="grid-content bg-purple">
                            <el-image
                                    class="table-td-thumb"
                                    :src="dessert[4].dessertPic"
                                    :preview-src-list="[dessert[4].dessertPic]"
                                    @click="u_book(dessert[4].dessertId )"
                            ></el-image>
                            <h5>{{dessert[4].dessertName}}</h5>
                        </div></el-col>
                        <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="5"><div class="grid-content bg-purple">
                            <el-image
                                    class="table-td-thumb"
                                    :src="dessert[5].dessertPic"
                                    :preview-src-list="[dessert[5].dessertPic]"
                                    @click="u_book(dessert[5].dessertId )"
                            ></el-image>
                            <h5>{{dessert[5].dessertName}}</h5>
                        </div></el-col>
                        <el-col :span="2"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="5"><div class="grid-content bg-purple">
                            <el-image
                                    class="table-td-thumb"
                                    :src="dessert[6].dessertPic"
                                    :preview-src-list="[dessert[6].dessertPic]"
                                    @click="u_book(dessert[6].dessertId )"
                            ></el-image>
                            <h5>{{dessert[6].dessertName}}</h5>
                        </div></el-col>
                        <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>
                        <el-col :span="5"><div class="grid-content bg-purple">
                            <el-image
                                    class="table-td-thumb"
                                    :src="dessert[7].dessertPic"
                                    :preview-src-list="[dessert[7].dessertPic]"
                                    @click="u_book(dessert[7].dessertId )"
                            ></el-image>
                            <h5>{{dessert[7].dessertName}}</h5>
                        </div></el-col>
                    </el-row>
            </el-tabs>
        </el-col>
        <el-col :span="3">
        </el-col>
    </el-row>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "UserDesserts",
        data(){
            return {
                activeName: 'first1',
                dessert:[{id:0,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:1,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},
                    {id:2,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:3,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:4,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:5,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:6,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:7,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}],
                dessert2:[{id:0,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:1,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},
                    {id:2,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:3,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:4,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:5,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:6,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:7,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}],
                dessert3:[{id:0,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:1,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},
                    {id:2,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:3,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:4,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:5,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:6,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:7,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}],
                dessert4:[{id:0,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:1,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},
                    {id:2,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:3,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:4,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:5,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:6,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:7,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}],
                dessert5:[{id:0,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:1,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},
                    {id:2,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:3,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:4,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:5,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"},{id:6,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}
                    ,{id:7,idView:require("../../assets/img/timg.jpg"),name:"阿萨达"}]

            }
        },
        created() {
            this.getData()
        },
        methods: {
            getData() {
                axios.get("http://localhost:8083/dessert/getDessertAll")
                    .then(response => {
                        if (response.data) {
                            console.log(response.data);
                            this.dessert = [];
                            this.dessert = response.data;
                        }
                    })
                    .catch(error => {
                        console.log(error.message);
                        alert(error.message);
                    });
            },
            enter(){
                // if(isLogin()){
                //     this.$router.push('/u_person');
                // }
                // else{
                //     this.$router.push('/u_login');
                // }
                this.$router.push('/u_person');

            },
            shoppingCart(){
                if(1){
                    this.$router.push('/u_cart');
                }
                else{
                    this.$router.push('/Judge');
                }
                // this.$router.push('/u_person');

            },
            loginOut(){
                localStorage.removeItem('telephone');
                this.$message.success('退出成功');
                this.$router.push('/u_login');
            },
            cakes(){
                this.$router.push('/u_movies');
            },
            desserts(){

                this.$router.push('/u_books');
            },
            puddings(){
                this.$router.push('/u_musics');
            },
            u_book(mid){
                this.$router.push({
                    path: "/u_book",
                    query: { mid: mid }
                });
            },
            uindex(){
                this.$router.push('/u_login_index');
            },
            regist(){
                this.$router.push('/u_regist');
            },
        },
        mounted() {
        }
    }
</script>

<style scoped>
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 260px;
        height: 340px;
    }
    .imgbox{
        text-align: center;
    }
</style>
